<template>
  <div id="ownerRegister_box">
    <div class="showcardphoto" v-show="showdriverlicensephoto">
      <div class="quickCard_box">
        <div class="showcardimg_box" v-show="sourceType=='wx'||sourceType=='app'">
          <p v-if="cardPositiveUrl" @click="cardPositiveUpload">
            <img ref="cardPositiveRef" :src="cardPositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="cardPositiveUpload">
            <img ref="cardPositiveRef" src="@/assets/imgs/sfxx_jsz_zheng@2x.png" />
            <span>点击上传</span>
          </p>
          <p v-if="cardReverseUrl" @click="cardReverseUpload">
            <img ref="cardReverseRef" :src="cardReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="cardReverseUpload">
            <img ref="cardReverseRef" src="@/assets/imgs/sfxx_jsz_bei@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardimg_box" v-show="sourceType=='h5'">
          <div>
            <md-image-reader name="reader4" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="cardPositiveUrl" @click="cardPositiveUpload">
              <img ref="cardPositiveRef" :src="cardPositiveUrl" />
              <span>点击上传</span>
            </p>
            <p v-else @click="cardPositiveUpload">
              <img ref="cardPositiveRef" src="@/assets/imgs/sfxx_jsz_zheng@2x.png" />
              <span>点击上传</span>
            </p>
          </div>
          <div>
            <md-image-reader name="reader5" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="cardReverseUrl" @click="cardReverseUpload">
              <img ref="cardReverseRef" :src="cardReverseUrl" />
              <span>点击上传</span>
            </p>
            <p v-else @click="cardReverseUpload">
              <img ref="cardReverseRef" src="@/assets/imgs/sfxx_jsz_bei@2x.png" />
              <span>点击上传</span>
            </p>
          </div>
        </div>
        <div class="showcardtext">
          <h6>驾驶证正反面</h6>
          <p>
            请按照示例图提交照片信息
            确保对齐、文字清晰、无反光、无遮挡
          </p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="driverLicenCannelBtn">取消</span>
          <span class="cardupload" @click="cardUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <top-bar :title="title"></top-bar>
    <div class="hitchregister_top">
      <div class="hitchregister_top_box">
        <div class="hitchregister_top_box_left">
          <p>
            <span>1</span>车辆认证
          </p>
        </div>
        <div class="hitchregister_top_box_center">
          <p></p>
        </div>
        <div class="hitchregister_top_box_right">
          <p>
            <span>2</span>车主认证
          </p>
        </div>
      </div>
      <div style="clear:both"></div>
      <p class="hitchregister_tip">信息仅用于车主认证，平安到家保障您的信息安全</p>
    </div>
    <div class="cardphoto_box" v-show="Iscardphoto=='2'">
      <h6>身份证人像面</h6>
      <p>
        <img ref="cardphotoPositiveRef" :src="cardphotoPositiveUrl" />
        <b>已上传</b>
        <span @click="cardphotoUpload" v-show="sourceType=='wx'||sourceType=='app'">
          重新上传
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
        <span v-show="sourceType=='h5'">
          <md-image-reader name="reader6" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>重新上传
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <p class="cardphoto_text">以下为身份证系统自动识别，如不正确请修改</p>
      <md-input-item ref="真实姓名" title="真实姓名" align="right" v-model="driverName"></md-input-item>
      <md-input-item ref="身份证号" title="身份证号" align="right" v-model="cardValue" maxlength="21" @blur="codeBlur"></md-input-item>
    </div>
    <div class="ownerRegister_ct">
      <md-field>
        <div v-show="sourceType=='wx'||sourceType=='app'">
          <md-field-item
            name
            title="上传身份证照片"
            align="right"
            arrow="arrow-right"
            :value="cardphoto"
            v-show="Iscardphoto=='1'"
            @click="cardphotoUpload"
          ></md-field-item>
        </div>
        <div v-show="sourceType=='h5'">
          <md-image-reader
            name="reader6"
            @complete="onImgComplete"
            :mime="['jpg','png','jpeg']"
            v-show="Iscardphoto=='1'"
          ></md-image-reader>
          <md-field-item
            name
            title="上传身份证照片"
            align="right"
            arrow="arrow-right"
            :value="cardphoto"
            v-show="Iscardphoto=='1'"
          ></md-field-item>
        </div>
        <md-field-item
          name
          title="上传驾驶证照片"
          align="right"
          arrow="arrow-right"
          :value="driverlicensephoto"
          @click="driverlicenseBtn"
        ></md-field-item>
        <md-field-item
          name
          title="初次领取驾照日期"
          align="right"
          arrow="arrow-right"
          :value="firstDate"
          @click="DatePickerShow"
        ></md-field-item>
        <md-field-item name title="服务城市" align="right" arrow="arrow-right" :value="selCityName" @click="cityNameBtn"></md-field-item>
      </md-field>
    </div>
    <div class="ownerBtn">
      <h6>
        我已阅读并同意
        <span>《顺风车用户协议》</span>
      </h6>
      <p @click="hitchDriverBtn">提交认证</p>
    </div>
    <md-date-picker
      ref="datePicker"
      v-model="isDatePickerShow"
      title="初次领取驾照日期"
      :minDate="minDate"
      :maxDate="maxDate"
      :default-date="currentDate"
      :unit-text="unitText"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>
    <md-popup v-model="cityNameList" position="bottom">
      <md-popup-title-bar title="选择城市" cancel-text="关闭" @cancel="hidePopUp()"></md-popup-title-bar>
      <div class="city_list_box">
        <p class="city_hd">请选择所在省市</p>
        <md-scroll-view
          id="city-box"
          ref="airScrollView"
          :scrolling-x="false"
          :bouncing="false"
          :auto-reflow="true"
          @scroll="$_onScroll"
        >
          <div v-for="(item, $index) in cityListData" :key="$index" class="scroll-view-list scroll-view-category">
            <div class="letter scroll-view-category-title" :ref="item.letter">{{item.letter}}</div>
            <div class="city-name" v-for="(city, $c) in item.data" :key="$c" @click="citySubmit(city)">{{city.cityName}}</div>
          </div>
        </md-scroll-view>
        <div class="fixed-letter">
          <div
            class="letters"
            v-for="(item, $index) in cityListData"
            :key="$index"
            @click="scrollToLetter(item.letter)"
          >{{item.letter}}</div>
        </div>
      </div>
    </md-popup>
  </div>
</template>
<script>
import {
  Icon,
  Field,
  FieldItem,
  InputItem,
  Popup,
  PopupTitleBar,
  Toast,
  ImageReader,
  Dialog,
  DatePicker,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore
} from 'mand-mobile';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
import { Base64 } from 'js-base64';
import TopBar from '@/components/TopBar';
import Utils from '@/common/pakjUtils';
import WxUtils from '@/common/weixinUtils';
import axios from 'axios';
import OSS from 'ali-oss';
let client = new OSS({
  region: 'oss-cn-qingdao',
  accessKeyId: 'LTAI0oUoBK7GwQn4',
  accessKeySecret: 'gHqAlhq2pX57Jz8XCO0zMLsKlZoAlX',
  bucket: 'pakj'
});
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [TopBar.name]: TopBar,
    [ImageReader.name]: ImageReader,
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [DatePicker.name]: DatePicker
  },
  data() {
    return {
      title: '车主认证',
      sourceType: '',
      cardphoto: '立即上传',
      driverlicensephoto: '立即上传',
      showdriverlicensephoto: false,
      cardPositiveUrl: '', // 驾驶证正面url地址
      cardReverseUrl: '', // 驾驶证反面url地址
      cardPositiveImg: '', // 传入后台驾驶证正面url地址
      cardReverseImg: '', // 传入后台驾驶证反面url地址
      firstDate: '请选择',
      isDatePickerShow: false,
      minDate: new Date('1970/9/9'),
      maxDate: new Date(),
      currentDate: new Date(),
      unitText: ['', '', '', '', ''],
      cityNameList: false,
      selCityName: '请选择',
      cityid: '', // 城市id
      cityListData: [],
      scrollY: 0,
      Iscardphoto: '1',
      driverName: '', // 姓名
      cardValue: '', // 身份证
      cardphotoPositiveUrl: '' // 身份证正面url地址
    };
  },
  mounted() {
    // 判断是否在微信浏览器
    if (Utils.isWeixinBroswer()) {
      WxUtils.wxConfig(['chooseImage', 'getLocalImgData']);
    }
    switch (Utils.getCurrentEnv()) {
      case 'wx':
        this.sourceType = 'wx';
        break;
      case 'h5':
        this.sourceType = 'h5';
        break;
      case 'app':
        this.sourceType = 'app';
        break;
    }
    // 信息回显
    Loading.show();
    http.post('/pakj/recruitHitchDriver/getHitchDriverCarRecruit', {}).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        if (!res.data.data) {
          return;
        }
        console.log(res.data);
        if (!res.data.data.identityHeadPortrait) {
          this.cardphoto = '立即上传';
          this.Iscardphoto = '1';
        } else {
          this.Iscardphoto = '2';
          this.cardphotoPositiveUrl = res.data.data.identityHeadPortrait; // 行驶证正面照片
          this.cardphoto = '重新上传';
        }
        if (!res.data.data.driverName) {
          this.driverName = '';
        } else {
          this.driverName = res.data.data.driverName; // 车主姓名
        }
        if (!res.data.data.driverIdNumberTemp) {
          this.cardValue = '';
        } else {
          this.cardValue = res.data.data.driverIdNumberTemp
            .replace(/\s+/g, '')
            .replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4'); // 身份证
        }
        if (!res.data.data.drivingLicence) {
          this.driverlicensephoto = '立即上传';
        } else {
          this.cardPositiveUrl = res.data.data.drivingLicence; // 驾驶证正面照片
          this.cardPositiveImg = res.data.data.drivingLicence;
          this.driverlicensephoto = '重新上传';
        }
        if (!res.data.data.drivingLicenceReverse) {
          this.driverlicensephoto = '立即上传';
        } else {
          this.cardReverseUrl = res.data.data.drivingLicenceReverse; // 驾驶证反面照片
          this.cardReverseImg = res.data.data.drivingLicenceReverse;
          this.driverlicensephoto = '重新上传';
        }
        if (!res.data.data.expiryInitiaLicenseDate) {
          this.firstDate = '请选择'; // 初次领取驾照日期
        } else {
          this.firstDate = moment(res.data.data.expiryInitiaLicenseDate, 'x').format('YYYY-MM-DD'); // 初次领取驾照日期
        }
        if (!res.data.data.cityName) {
          this.selCityName = '请选择'; // 服务城市
          this.cityid = '';
        } else {
          this.selCityName = res.data.data.cityName; // 服务城市
          this.cityid = res.data.data.cityId;
        }
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 拉起服务城市
    cityNameBtn() {
      this.cityNameList = true;
      this.cityList();
    },
    $_onScroll({ scrollTop }) {
      this.scrollY = scrollTop;
    },
    scrollToLetter(letter) {
      this.$refs.airScrollView.scrollTo(0, this.$refs[letter][0].offsetTop, true);
    },
    citySubmit(city) {
      console.log(city);
      this.selCityName = city.cityName;
      this.cityid = city.cityId;
      this.cityNameList = false;
    },
    hidePopUp() {
      this.cityNameList = false;
    },
    cityList() {
      let parm = {
        type: '2'
      };
      Loading.show();
      http.post('/pakj/hitchCity/getOpenCityList', parm).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.cityListData = this.citySort(res.data.data);
          console.log(res.data.data);
          console.log(this.cityListData);
        } else {
          Dialog.alert({
            title: '错误',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    citySort(arr) {
      var letters = '*ABCDEFGHJKLMNOPQRSTWXYZ'.split('');
      var segs = [];
      var curr;
      letters.forEach(function(item, i) {
        curr = {
          letter: item,
          data: []
        };
        arr.forEach(function(obj) {
          let p = pinyinUtil.getFirstLetter(obj.cityName)[0];
          if (item === p) {
            curr.data.push(obj);
          }
        });
        if (curr.data.length) {
          segs.push(curr);
        }
      });
      return segs;
    },
    // 拉起驾驶证上传弹窗
    driverlicenseBtn() {
      this.showdriverlicensephoto = true;
    },
    // 微信驾驶证正面
    cardPositiveUpload() {
      let type = '4';
      if (this.sourceType === 'wx') {
        this.pullUpWxUpload(type);
      } else if (this.sourceType === 'app') {
        this.pullUpAppUpload(type);
      }
    },
    // 微信驾驶证反面
    cardReverseUpload() {
      let type = '5';
      if (this.sourceType === 'wx') {
        this.pullUpWxUpload(type);
      } else if (this.sourceType === 'app') {
        this.pullUpAppUpload(type);
      }
    },
    // 微信上传身份证
    cardphotoUpload() {
      let type = '6';
      if (this.sourceType === 'wx') {
        this.pullUpWxUpload(type);
      } else if (this.sourceType === 'app') {
        this.pullUpAppUpload(type);
      }
    },
    // 拉起app上传
    pullUpAppUpload(number) {
      /* eslint-disable */
      var type = {
        type: number
      };
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        handler.hitchDriverUpload(JSON.stringify(type));
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.hitchDriverUpload.postMessage(JSON.stringify(type));
      }
      window.hitchuploadcallback = this.hitchuploadcallback;
      // Loading.show();
    },
    hitchuploadcallback(msg) {
      var data = JSON.parse(Base64.decode(msg));
      switch (String(data.type)) {
        // 4 驾驶证正面
        case '4':
          this.cardPositiveUrl = data.url;
          break;
        // 5 驾驶证反面
        case '5':
          this.cardReverseUrl = data.url;
          break;
        // 6 身份证正面
        case '6':
          this.cardphotoPositiveUrl = data.url;
          this.distinguishCard(this.cardphotoPositiveUrl); // 后台识别正面身份证
          break;
        default:
          break;
      }
      console.log(data);
    },
    // 微信上传
    pullUpWxUpload(type) {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          wx.getLocalImgData({
            localId: res.localIds[0], // 图片的localID
            success: res => {
              if (
                Utils.getOSName()
                  .toLowerCase()
                  .indexOf('android') >= 0
              ) {
                res.localData = 'data:image/jpeg;base64,' + res.localData;
              }
              // console.log(res.localData);
              this.weixinUpload(res.localData, type);
            }
          });
        }
      });
    },
    weixinUpload(data, type) {
      Loading.show('上传中');
      var date = new Date();
      let typeImg = ''; // 上传图片属于那种类型 例如 驾驶证 行驶证 正反面
      switch (type) {
        case '4':
          typeImg = 'cardPositive'; // 驾驶证正面
          break;
        case '5':
          typeImg = 'cardReverse'; // 驾驶证反面
          break;
        case '6':
          typeImg = 'cardphoto'; // 身份证正面
          break;
      }
      var time = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
      var storeAs = 'hitchdriver/' + typeImg + '/' + time + '-' + date.getTime() + '.jpg';
      // blob转arrayBuffer
      var reader = new FileReader();
      reader.readAsArrayBuffer(this.dataURLtoFile(data));
      reader.onload = event => {
        var buffer = new OSS.Buffer(event.target.result);
        client
          .put(storeAs, buffer, {})
          .then(results => {
            let imgUrl = 'https://img.padj.group/' + results.name; // 照片回显
            switch (type) {
              case '4':
                this.cardPositiveUrl = imgUrl;
                this.$nextTick(() => {
                  this.$refs.cardPositiveRef.onload = () => {
                    Loading.hide();
                  };
                });
                break;
              case '5':
                this.cardReverseUrl = imgUrl;
                this.$nextTick(() => {
                  this.$refs.cardReverseRef.onload = () => {
                    Loading.hide();
                  };
                });
                break;
              case '6':
                this.cardphotoPositiveUrl = imgUrl;
                this.distinguishCard(this.cardphotoPositiveUrl);
                break;
            }
          })
          .catch(err => {
            Loading.hide();
            console.log(err);
          });
      };
    },
    // h5图片上传
    onImgComplete(name, file) {
      Loading.show('上传中');
      if (file.file.type === 'image/jpeg' || file.file.type === 'image/png') {
        var date = new Date();
        let typeImg = ''; // 上传图片属于那种类型 例如 驾驶证 行驶证 正反面
        switch (name) {
          case 'reader4':
            typeImg = 'cardPositive'; // 驾驶证正面
            break;
          case 'reader5':
            typeImg = 'cardReverse'; // 驾驶证反面
            break;
          case 'reader6':
            typeImg = 'cardphoto'; // 身份证正面
            break;
        }
        var time = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
        var storeAs =
          'hitchdriver/' + typeImg + '/' + time + '-' + date.getTime() + '.' + file.file.name;
        // blob转arrayBuffer
        var reader = new FileReader();
        reader.readAsArrayBuffer(this.dataURLtoFile(file.dataUrl));
        reader.onload = event => {
          var buffer = new OSS.Buffer(event.target.result);
          client
            .put(storeAs, buffer, {})
            .then(results => {
              let imgUrl = 'https://img.padj.group/' + results.name; // 照片回显
              switch (name) {
                case 'reader4':
                  this.cardPositiveUrl = imgUrl;
                  this.$nextTick(() => {
                    this.$refs.cardPositiveRef.onload = () => {
                      Loading.hide();
                    };
                  });
                  break;
                case 'reader5':
                  this.cardReverseUrl = imgUrl;
                  this.$nextTick(() => {
                    this.$refs.cardReverseRef.onload = () => {
                      Loading.hide();
                    };
                  });
                  break;
                case 'reader6':
                  console.log(imgUrl);
                  this.cardphotoPositiveUrl = imgUrl;
                  this.distinguishCard(this.cardphotoPositiveUrl);
                  break;
              }
            })
            .catch(err => {
              Loading.hide();
              console.log(err);
            });
        };
      } else {
        Loading.hide();
        Dialog.alert({
          title: '提示',
          content: '图片格式错误',
          confirmText: '确定'
        });
      }
    },
    dataURLtoFile(dataurl) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 驾驶证上传取消
    driverLicenCannelBtn() {
      if (this.cardPositiveImg) {
        this.driverlicensephoto = '重新上传';
      } else {
        this.cardPositiveUrl = '';
        this.cardReverseUrl = '';
        this.driverlicensephoto = '立即上传';
      }
      this.showdriverlicensephoto = false;
    },
    // 后台识别身份证号
    distinguishCard(url) {
      var params = {
        photoType: 1,
        url: url,
        side: 1
      };
      console.log(params);
      http.post('/pakj/common/photoAnalysis', params).then(res => {
        Loading.hide();
        console.log(res);
        if (res.data.code === '000000') {
          if (res.data.data) {
            let imgMsg = JSON.parse(res.data.data);
            if (imgMsg.status === '000000') {
              if (imgMsg.result.realname) {
                this.driverName =
                  imgMsg.result.realname.substring(0, 1) + imgMsg.result.realname.substring(1);
              }
              if (imgMsg.result.idcard) {
                var id = imgMsg.result.idcard;
                this.cardValue = id
                  .replace(/\s+/g, '')
                  .replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4');
              }
              this.Iscardphoto = '2';
            } else {
              this.Iscardphoto = '2';
              Dialog.alert({
                title: '提示',
                content: imgMsg.message,
                confirmText: '确定'
              });
            }
          } else {
            this.Iscardphoto = '2';
            Dialog.alert({
              title: '提示',
              content: '未识别到身份证信息',
              confirmText: '确定'
            });
          }
        } else {
          this.cardphotoPositiveUrl = '';
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 驾驶证上传
    cardUploadBtn() {
      if (!this.cardPositiveUrl) {
        Toast({
          content: '请上传驾驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardReverseUrl) {
        Toast({
          content: '请上传驾驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.cardPositiveImg = this.cardPositiveUrl;
      this.cardReverseImg = this.cardReverseUrl;
      this.driverlicensephoto = '重新上传';
      this.showdriverlicensephoto = false;
    },
    DatePickerShow() {
      this.isDatePickerShow = true;
    },
    onDatePickerConfirm() {
      this.firstDate = this.$refs.datePicker.getFormatDate('yyyy-MM-dd');
    },
    codeBlur() {
      this.cardValue = this.cardValue
        .replace(/\s+/g, '')
        .replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4');
    },
    // 提交认证
    hitchDriverBtn() {
      var reg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X]|[x])$/;
      if (this.$route.query.hitchdriverid) {
        if (!this.cardphotoPositiveUrl) {
          Toast({
            content: '请上传身份证正面照片',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.driverName) {
          Toast({
            content: '请输入名字',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.cardValue) {
          Toast({
            content: '请输入身份证号',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        var code = this.cardValue.replace(/\s+/g, '');
        if (!reg.test(code)) {
          Toast({
            content: '请输入正确的二代18位身份证号',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.cardPositiveImg) {
          Toast({
            content: '请上传驾驶证正面照片',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.cardReverseImg) {
          Toast({
            content: '请上传驾驶证反面照片',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (this.firstDate === '请选择') {
          Toast({
            content: '请选择初次领取驾驶证日期',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (this.selCityName === '请选择') {
          Toast({
            content: '请选择服务城市',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        let params = {
          hitchDriverRecruitId: this.$route.query.hitchdriverid,
          identityHeadPortrait: this.cardphotoPositiveUrl, // 身份证正面
          identityNationalEmblem: '',
          driverIdNumber: encryptByDESModeEBC(code), // 身份证号
          driverName: this.driverName, // 请输入名字
          drivingLicence: this.cardPositiveImg, // 驾驶证正面
          drivingLicenceReverse: this.cardReverseImg, // 驾驶证反面
          expiryInitiaLicenseDate: this.firstDate, // 初次领证时间
          cityId: this.cityid, // 城市ID
          cityName: this.selCityName, // 城市名字
          companyId: ''
        };
        Loading.show();
        http.post('/pakj/recruitHitchDriver/hitchDriverRecruit', params).then(res => {
          Loading.hide();
          if (res.data.code === '000000') {
            this.$router.push({
              name: 'hitchRegisterStatus',
              query: {
                hitchdriverid: this.$route.query.hitchdriverid,
                userphone: this.$route.query.userphone
              }
            });
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
      } else {
        Dialog.alert({
          title: '提示',
          content: '无法获取司机ID',
          confirmText: '确定'
        });
      }
    }
  }
};
</script>
<style lang="stylus">
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#ownerRegister_box {
  height: 100vh;
  background-color: color-primary-background;

  .cardphoto_box {
    background-color: #fff;
    padding: 0px 30px;
    margin-top: 20px;
  }

  .cardphoto_box .md-image-reader {
    height: 50px;
  }

  .cardphoto_box h6 {
    padding-top: 30px;
    font-size: 30px;
    color: #333;
    font-weight: 400;
  }

  .cardphoto_box p {
    position: relative;
    margin-top: 10px;
  }

  .cardphoto_box p.cardphoto_text {
    font-size: 24px;
    color: #FF6917;
    margin-top: 20px;
  }

  .cardphoto_box p b {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 306px;
    height: 40px;
    background: rgba(51, 51, 51, 0.6);
    font-size: 18px;
    color: #fff;
    text-align: center;
  }

  .cardphoto_box p img {
    width: 306px;
    height: 196px;
  }

  .cardphoto_box p span {
    color: #FF6917;
    font-size: 28px;
    float: right;
    margin-top: 100px;
  }

  .cardphoto_box p span img {
    width: 12px;
    height: 20px;
  }

  .hitchregister_top {
    background-color: #fff;
    height: 168px;
    margin-top: 20px;
  }

  .hitchregister_top_box {
    padding-top: 45px;
  }

  .hitchregister_top_box_left {
    float: left;
    margin-left: 150px;
  }

  .hitchregister_top_box_left p {
    color: #666;
    font-size: 30px;
  }

  .hitchregister_top_box_left p span {
    background-color: #CBCBCB;
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 36px;
    margin-right: 10px;
  }

  .hitchregister_top_box_center {
    float: left;
    margin: 0px 10px;
  }

  .hitchregister_top_box_center p {
    width: 104px;
    height: 1px;
    background-color: #D8D8D8;
    margin-top: 21px;
  }

  .hitchregister_top_box_right {
    float: left;
  }

  .hitchregister_top_box_right p {
    color: #FF6917;
    font-size: 30px;
  }

  .hitchregister_top_box_right p span {
    background-color: #FF6917;
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 36px;
    margin-right: 10px;
  }

  .hitchregister_tip {
    font-size: 22px;
    color: #999;
    margin-top: 10px;
    text-align: center;
  }

  .ownerRegister_ct {
    margin-top: 20px;
  }

  .ownerRegister_ct .md-image-reader {
    width: 100%;
    height: 80px;
  }

  .ownerBtn {
    position: absolute;
    bottom: 20px;
    left: 0px;
    width: 100%;
  }

  .ownerBtn h6 {
    font-size: 24px;
    color: #666;
    text-align: center;
    font-weight: 400;
  }

  .ownerBtn h6 span {
    color: #FF6917;
    margin-left: 10px;
  }

  .ownerBtn p {
    height: 98px;
    line-height: 98px;
    background-color: #FF6917;
    font-size: 36px;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    margin: 10px 20px 0px 20px;
  }

  .showcardphoto {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .showcardimg_box {
    width: 600px;
    margin: auto;
  }

  .showcardimg_box p {
    margin-top: 10px;
    position: relative;
  }

  .showcardimg_box p img {
    width: 600px;
    height: 340px;
  }

  .showcardimg_box .md-image-reader {
    width: 600px;
    height: 340px;
  }

  .showcardimg_box p span {
    width: 200px;
    height: 88px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    display: inline-block;
    line-height: 88px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    position: absolute;
    top: 128px;
    left: 200px;
  }

  .showcardtext h6 {
    text-align: center;
    font-size: 32px;
    color: #FF6917;
    font-weight: 400;
  }

  .showcardtext p {
    color: #fff;
    font-size: 28px;
    text-align: center;
    width: 450px;
    margin: auto;
    padding-top: 10px;
  }

  .cardBtn {
    margin: 10px 40px;
  }

  .cardcannel {
    width: 200px;
    display: inline-block;
    height: 98px;
    line-height: 98px;
    text-align: center;
    font-size: 36px;
    color: #FF6917;
    background-color: #fff;
    border-radius: 10px;
  }

  .cardupload {
    width: 440px;
    display: inline-block;
    height: 98px;
    line-height: 98px;
    text-align: center;
    font-size: 36px;
    color: #fff;
    background-color: #FF6917;
    margin-left: 30px;
    border-radius: 10px;
  }

  .city_list_box {
    background-color: #fff;
    height: 91.8vh;
    position: relative;
  }

  .city_hd {
    padding: 10px 30px;
    font-size: 28px;
    color: #666;
  }

  #city-box {
    height: calc(100vh - 196px);
    background-color: #EFEFEF;
    position: relative;
  }

  .scroll-view-list {
    font-size: 28px;
  }

  .letter {
    background-color: color-primary-background;
    padding: 30px;
    color: color-text-caption;
    width: 100vw;
  }

  .city-name {
    background-color: #fff;
    border-bottom: 1px solid #E0E0E0;
    padding: 30px;
  }

  .fixed-letter {
    position: absolute;
    top: 0px;
    display: flex;
    flex-direction: column;
    align-item: center;
    justify-content: center;
    font-size: 28px;
    right: 30px;
    height: 100%;
    margin-top: 80px;
    z-index: 3;
  }

  .letters {
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
  }
}
</style>
